{% extends 'project/layout.html' %}
{% block title %}
项目首页
{% endblock%}
{% block css%}
<style>
    .color-container{
        display: flex;

    }
    .color-container .color{
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: red;
        margin-right: 5px;
        cursor: pointer;
        transition: all .2s;
    }
    .color-container .color .active{
        transform: scale(1.1);
        border:4px solid #ccc;
    }
    .error{
        color: red;
        position: absolute;
    }
    .panel-body{
        display: flex;
    }
    .panel-body .item{
        margin-right: 10px;
    }
    .item{
        border-radius: 10px;
        border: 1px solid #cccccc;
        cursor: pointer;
    }
    .item .content{
        width: 120px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;


    }
    .item .footer{
        font-size: 8px;
        display: flex;
        justify-content: space-between;
        padding-left: 2px;
        padding-right: 2px;
    }
    a{
        color: #fff;
        text-decoration: none;
    }
</style>
{% endblock %}
{% block content %}
    <div class="container-fluid">

        <!--   添加项目按钮     -->
        <div style="margin-bottom: 20px">
            <button id="addproject" type="button" class="btn btn-primary" >添加项目</button>
        </div>
        <!--  项目列表      -->
        <div class="panel panel-primary">
          <div class="panel-heading"> <i class="iconfont icon-girlggx"></i> 星标项目</div>
          <div class="panel-body">
            {% for item in project_dict.star %}
            <div class="item">
                <div class="content" style="background-color:{{item.value.get_color_display}}">
                    <a style="text-decoration: none" href="{% url 'web:dashboard' project_id=item.value.id %}">{{item.value.name}}</a>
                </div>
                <div class="footer">
                    <div class="creator"> <i class="iconfont icon-star-fill unstar" data-id="{{item.value.id}}"  data-type="{{item.type}}"  style="color: red" ></i> {{item.value.creator.username}}</div>
                    <div class="joiner"> <i class="iconfont icon-jurassic_user"></i> {{item.value.join_count}}</div>

                </div>
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading"> <i class="iconfont icon-fangdajing"></i>  我的项目</div>
          <div class="panel-body">
            {% for item in project_dict.my %}
            <div class="item">
                <div class="content" style="background-color:{{item.get_color_display}}">
                    <a href="{% url 'web:dashboard' project_id=item.id  %}">{{item.name}}</a>
                </div>
                <div class="footer">
                    <div class="creator"> <i class="iconfont icon-star-fill mystar" data-id="{{item.id}}"  ></i> {{item.creator.username}}</div>
                    <div class="joiner"> <i class="iconfont icon-jurassic_user"></i> {{item.join_count}}</div>

                </div>
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="panel panel-info">
          <div class="panel-heading">  <i class="iconfont icon-caidan"></i> 参与的项目</div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">项目添加</h4>
          </div>
          <div class="modal-body">
                <!--       添加项目的表单    -->
                <form id="form">
                    {% csrf_token %}
                  <div class="form-group">
                    <label for="name">项目名</label>
                    <input type="text" id="name" name="name" class="form-control">
                      <span class="error"></span>
                  </div>
                  <div class="form-group">
                    <label for="color">请选择颜色</label>
                    <input type="text" id="color" name="color" style="visibility: hidden">
                    <span class="error"></span>
                    <div class="color-container" >
                        {% for item in colors %}
                            <div class="color" data-color="{{item.0}}" style="background-color: {{item.1 }}"></div>
                        {% endfor %}
<!--                        <div class="color active"></div>-->
                    </div>

                  </div>
                 <div class="form-group">
                    <label for="desc">项目描述</label>
                        <textarea id="desc"  class="form-control" rows="4" name="desc"  style="resize:none;"></textarea>
                        <span class="error"></span>
                     <!--                    <textarea  class="form-control" id="desc" placeholder="请输入项目描述">-->
                  </div>
<!--                  <button  id="createBtn" class="btn btn-default">创建项目</button>-->
                </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button   id="createBtn" type="button" class="btn btn-primary">创建项目</button>
          </div>
        </div>
      </div>
    </div>
{% endblock%}

{% block js %}
<script>
    //添加项目
    function addProject(){
        let btn=document.querySelector('#addproject')
        btn.addEventListener('click',()=>{
            $('#myModal').modal('toggle')
        })
    }
    addProject()
    //选择颜色
    function getColor(){
        let div=document.querySelector('.color-container')
        div.addEventListener('click',(e)=>{
            if(e.target.classList.contains('color-container')){
                return
            }
            let colorInput=document.querySelector('#color')
            let color_choiced=e.target.dataset.color
            colorInput.value=color_choiced
            let div=document.querySelectorAll('.color')

            for(let item of div){
                item.classList.remove('active')
            }
            e.target.classList.add('active')

        })
    }
    getColor()
    //创建项目
    function createProject(){
        const btn=document.querySelector('#createBtn')
        btn.addEventListener('click',async (e)=>{
            e.preventDefault()
            const form=document.querySelector('#form')
            const formData=new FormData(form)
            const data=await fetch('{% url "web:project_list"%}',{
                method:'post',
                body:formData
            })
            const res=await data.json()

            if(res.code==200){
                alert('创建成功')
                location.reload()
            }else{
                console.log(res.error)
                for(let item in res.error){
                    let doc=document.querySelector(`#${item}`)
                    let span=doc.nextElementSibling
                    span.innerText = res.error[item]
                    setTimeout(()=>{
                        span.innerText = ''
                    },2000)
                }
            }
        })
    }
    createProject()
    //给我的项目添加星标
    function addMyStar(){
        let my_starbtns=document.querySelectorAll('.mystar')
        for (let item of my_starbtns) {
            item.addEventListener('click',async (e)=>{

            let formData=new FormData()
            type=['type','my']
            id=['id',e.target.dataset.id]
            formData.append(...type)
            formData.append(...id)
            const res= await fetch('{% url "web:project_star"%}',{
                method:'post',
                body:formData
            })
            const data=await res.json()
            if(data.code==200){
                alert('更新成功')
                location.href.reload()
            }
        })
        }
        // my_starbtn.addEventListener('click',async (e)=>{
        //
        //     let formData=new FormData()
        //     type=['type','my']
        //     id=['id',e.target.dataset.id]
        //     formData.append(...type)
        //     formData.append(...id)
        //     const res= await fetch('{% url "web:project_star"%}',{
        //         method:'post',
        //         body:formData
        //     })
        //     const data=await res.json()
        //     if(data.code==200){
        //         alert('更新成功')
        //         location.href.reload()
        //     }
        // })
    }
    addMyStar()
    //取消星标
    function removerStar(){
        let unstarts=document.querySelectorAll('.unstar')
        for(let item of unstarts){
            item.addEventListener('click',async (e)=>{
                let id=e.target.dataset.id
                let project_type=e.target.dataset.type
                let formData=new FormData()
                formData.append('id',id)
                formData.append('type',project_type)
                const res= await fetch('{% url "web:project_unstar" %}',{
                    method : 'post',
                    body : formData
                })
                const data=await res.json()
                if(data.code==200){
                    alert(' 更新成功')
                    location.reload()
                }
            })

        }
    }
    removerStar()
</script>
{% endblock%}